/* ----------------------- Baisc Whole Page Setup --------------------------------*/


:root {
    
    --color-1: rgb(255, 255, 255);    
    --color-2:rgb(0, 0, 0);
    --color-3:rgb(187, 165, 135);     
    --color-4: rgb(187, 165, 135);    
    --color-5:rgb(187, 165, 135);  
    --color-6:rgb(187, 165, 135);  
    --color-7:rgb(187, 165, 135);  
    --color-8: rgb(187, 165, 135);  
    --color-9: rgb(187, 165, 135);  
    --color-10: rgb(187, 165, 135);
    --color-11: rgb(187, 165, 135);


    /*----------
    --color-4: rgb(226, 107, 22);    
    --color-5:rgb(229, 79, 140);
    --color-6:rgb(255, 0, 0);
    --color-7:rgb(100, 180, 255); 
    --color-8: rgb(0, 176, 80);
    --color-9: rgb(140, 140, 140);
    --color-10: rgb(168, 84, 236);
    --color-11: rgb(117 234 170);    ----------*/
} 


body {
    margin: 0;
    background-color: var(--color-2);
    
    display: flex;                      /* ----  STICKY FOOTER   ---*/             
    flex-direction: column;
    height: 100vh;                     /* ----  Avoid the IE 10-11 `min-height` bug   ---*/
}



.content {
    flex: 1 0 auto;                     /* STICKY FOOTER    Prevents Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
}


ul {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}




/* ----------------------- Fully loaded --------------------------------*/


#loader { 
    border: 12px solid #f3f3f3; 
    border-radius: 50%; 
    border-top: 12px solid #444444; 
    width: 70px; 
    height: 70px; 
    animation: spin 1s linear infinite; 
} 
  
@keyframes spin { 
    100% { 
        transform: rotate(360deg); 
    } 
} 
  
.FullyLoaded { 
    position: absolute; 
    top: 10%;
    left: 45%;
} 



/* ----------------------- Navigtion Bar --------------------------------*/



.NavBar {                                                       /* ---- Parent Element  ---*/
    padding: 5% 0;
    display: flex;
    flex-direction: row;

    justify-content: space-between;
    align-items: center;
}



.NavBar li {                                                    /* ---- Direct Childs  ---*/
    flex-grow: 1;
    padding: 0;
    text-align: center;
    list-style-type: none;
}
   
   
.Rotation:hover,
.Rotation2:hover { 
    transition: transform .8s ease-in-out;
    transform: rotate(360deg);
}


.BB {
    max-width: 38%;
}

.BourgoinEvenements {
    min-width: 400px;
    position: relative;
    bottom: 1.5px;
}

.ThreeLines {
    max-width: 28%;
}




.NavBarOrdi {
    display: none;
}




/*-------------- Accueil -----------------*/


.Mall1 {
    display: block;
    margin: 0 0 5% 0;
}

.Mall11 {
    display: none;
    margin: 0 0 5% 0;
}




.Titre {
    color: var(--color-3);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

    margin: 0;
    padding: 0 0 2% 0;
    font-size: 3em;
    text-align: center;
}


article p {
    padding: 0% 10% 2% 10%;
    color: var(--color-3);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 3em;
    text-align: center;
}







/*-------------- Image SLiders -----------------*/




#slideMechanics {
    position: relative;
}




#box {
    margin: 2.5% 10%;
}

.imagesMain {
    width: 99%;
    border: 3px outset var(--color-3);
    border-radius: 20px;
}




#boxDino {                                              /*-------------- Special DINO -----------------*/
    margin: 0 10% 4% 10%;
}

.VideoDino {                                        /*-------------- Special DINO -----------------*/
    width: 99%;
    height: 450px;
    border: 4px outset var(--color-3);
    border-radius: 20px;
}





button {
    width: 5%;
    color: var(--color-3);
    background-color: var(--color-2);

    font-size: 2em;
    cursor: pointer;

    position: absolute;
    top: 45%;
}

.prev {
    margin-left: 2.5%;
}

.next {
    margin-left: 92.5%;
}








/*-------------- MainButton -----------------*/


.ButtonsNav {                   /* ---- To center buttons  ---*/
    text-align: center;
}

.MainButton {                                                       
    
    margin: 3% 10%;
    padding: 4% 3% 4% 10%;
    display: inline-block;

    position: relative;                                 /* ---- Parent Element  ---*/

    border: 10px outset var(--color-3);
    border-radius: 25px;

    color: var(--color-3);
    
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 2.5em;
}

.MainButton:hover {
    background-color: var(--color-9);
    color: var(--color-2);
}



.ExpositionsAnimations {
    float: left;
    position: absolute;                                 /* ---- Child Element, positionned absolutely not to the page but to the parent element since its potionning is "relative" ---*/
    
    max-width: 6%;
    left: 5%;
    top: 30%;
}




.Contact {
    float: left;
    position: absolute;
    
    max-width: 11%;
    left: 12%;
    top: 27%;
}


.PreviousPage {
    float: left;
    position: absolute;
    
    max-width: 11%;
    left: 12%;
    top: 30%;
}





/*------------------ ExpositionsAnimations -----------------*/


.ExpoBar li a,
.Theme li div {                                     /*-------Theme button also-----------*/

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    min-height: 110px;

    color: var(--color-3);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 3em;
    border-radius: 25px;
}

.ExpoBar li a {
    margin: 0 2% 2% 2%;
    padding: 3%;
}



.ExpoBar li a:hover {
    background-color: var(--color-3);
    color: var(--color-2);
}

.ExpoBar li:last-child {
    padding: 0 0 8% 0;
}










.Artistes {
    border: 10px outset var(--color-4);
} 

.Artiste1 {
    max-width: 12%;
}

.Artiste2 {
    max-width: 8.8%;
}




.Dino {
    border: 10px outset var(--color-4);
} 

.Dino1 {
    max-width: 14%;
    transform: scaleX(-1);
}

.Dino2 {
    max-width: 15%;
}




.Family {
    border: 10px outset var(--color-10);
} 

.Family1 {
    max-width: 14%;
}

.Family2 {
    max-width: 13%;
}



.Fashion {
    border: 10px outset var(--color-5);
} 

.Fashion1 {
    max-width: 9%;
}

.Fashion2 {
    max-width: 7.02%;
    transform: scaleX(-1);
}



.Xmas {
    border: 10px outset var(--color-6);
} 

.Xmas1 {
    max-width: 10%;
}

.Xmas2 {
    max-width: 11.3%;
}



.VR {
    border: 10px outset var(--color-7);
} 

.VR1 {
    max-width: 11%;
}

.VR2 {
    max-width: 7.5%;
    transform: scaleX(-1);
}



.RSE {
    border: 10px outset var(--color-8);
}

.RSE1 {
    max-width: 10%;
}

.RSE2 {
    max-width: 11%;
}



.Inauguration {
    border: 10px outset var(--color-9);
}


.Inauguration1 {
    max-width: 11%;
}

.Inauguration2 {
    max-width: 12.5%;
}







/*------------------ Theme -----------------*/



.ThemeD li div {                                   

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    color: var(--color-2);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 2.5em;

    margin: 0 10% 4% 10%;
    padding : 0.5% 2%;
    background-color: var(--color-3);
    border: 6px outset;
    border-radius: 15px;

    min-height: 65px;
}








.ThemeD .Artistes {
    border-color: var(--color-4);
} 

.Artiste3 {
    max-width: 8.3%;
}

.Artiste4 {
    max-width: 6.1%;
}





.ThemeD .Dino {
    border-color: var(--color-4);
} 

.Dino3 {
    max-width: 9.7%;
    transform: scaleX(-1);
}

.Dino4 {
    max-width: 11%;
}





.ThemeD .Family {
    border-color: var(--color-10);
}

.Family3 {
    max-width: 11.6%;
}

.Family4 {
    max-width: 10.3%;
}




.ThemeD .Inauguration {
    border-color: var(--color-9); 
}


.Inauguration3 {
    max-width: 8%;
}

.Inauguration4 {
    max-width: 8.5%;
}






.ThemeD .Fashion {
    border-color: var(--color-5);
} 

.Fashion3 {
    max-width: 6.8%;
}

.Fashion4 {
    max-width: 4.8%;
    transform: scaleX(-1);
}



.ThemeD .Xmas {
    border-color: var(--color-6);
} 

.Xmas3 {
    max-width: 6.8%;
}

.Xmas4 {
    max-width: 7.8%;
}




.ThemeD .VR {
    border-color: var(--color-7);
} 

.VR3 {
    max-width: 10.5%;
}

.VR4 {
    max-width: 7.5%;
    transform: scaleX(-1);
}



.ThemeD .RSE {
    border-color: var(--color-8);
}

.RSE3 {
    max-width: 8.2%;
}

.RSE4 {
    max-width: 8.5%;
}













/*------------------ Contact -----------------*/



.TCoordonnes {
    padding: 0% 10%;
    color: var(--color-3);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 2.5em;
    text-align: center;
}




.Mail {
    display: flex;
    position: relative;
    justify-content: center;

    margin: 8% 0;
}

.Address {
    max-width: 8%;
    padding-right: 2%;
    max-height: 61px;
}

span.email {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 3em;
    color: var(--color-3);
}




/*-----------------Footer------------*/


.footer {
    flex-shrink: 0;                     /* STICKY FOOTER       Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */

    margin: 6% 0 0 0;
    padding: 2%;

    border-top: 3px solid var(--color-3);
  
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 0.6em;
    color: var(--color-3); 
}




























/*-----------------Media Querry     Responsive adaptation------------*/




@media (min-width: 1024px) {

    body {
        display: block;
    }

    .NavBar {                                                      
        display: block;
        padding: 5% 3%;
        text-align: center;
    }


    .NavBar li {                                                    
        display: inline-block;
    }
       

    .BB {
        min-width: 60px;
        padding-right: 25px;
        position: relative;
        top: 5px;
    }
    
    .BourgoinEvenements {
        min-width: 490px;
        position: relative;
        top: 1.5px;
    }

    .ThreeLines {
        display: none;
    }


    .Mall1 {
        display: none;
        margin: 0 0 5% 0;
    }
    
    .Mall11 {
        display: block;
        margin: 0;
    }






    



/*------------NAVBAR    Media Querry-----------------*/



    .NavBarOrdi {
        display: flex;
        justify-content: space-evenly;
        padding: 0 0 4% 0;
    }

    .NavBarOrdi li {
        position: relative;
        bottom: 18px;
        font-size: 2em;
        list-style-type: none;
    }
    

    
    .NavBarOrdi li a {
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        border-radius: 15px;
    
        padding: 10px 30px;
    }
    
    .NavBarOrdi li a:link,
    .NavBarOrdi li a:visited {
        color: var(--color-3);
        background-color: var(--color-2);
        border: 2px outset var(--color-3);
    }

    .NavBarOrdi li a:hover {
        color: var(--color-2);
        background-color: var(--color-3);
        border: 2px outset var(--color-2);
    }





    /*-----------------1st Page Media Querry------------*/
    .Titre {
        display: none;
    }


    #box {
        margin: 0 20%;
    }

    .prev {
        margin-left: 13%;
    }
    
    .next {
        margin-left: 84%;
    }


    button {
        width: 3%;
    }


    article p {
        margin: 0,5% 0 0 0;
        padding: 0 20%;
        color: var(--color-3);
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 1.5em;
        text-align: center;
    }

    .MainButton {
        display: none;
    }




    .footer {
        display: block;
    
        margin: 4% 0 0 0;
        padding: 10px 0;
    
        border-top: 1.5px solid var(--color-3);
      
        text-align: center;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 0.6em;
        color: var(--color-3); 
    }





    /*-----------------Selection Theme  Media Querry------------*/

    .ExpoBar {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }

    .ExpoBar li {
        font-size: 0.5em;
        width: 32%;
        margin-bottom: 2%;
    }

    

    .ExpoBar li a {
        border-radius: 20px;
        padding: 0 3%;
        min-height: 70px;
    } 





    .ExpoBar li a img {                                    /*-----------------Adaptation Taille des logos de thème pour affichage ordi ------------*/
        max-height: 48px;    }



    
    .Artistes {
        border: 5px outset var(--color-4);
    } 

    .Dino {
        border: 5px outset var(--color-4);
    } 

    .Family {
        border: 5px outset var(--color-10);
    } 
    
    .Fashion {
        border: 5px outset var(--color-5);
    }  
    
    .Xmas {
        border: 5px outset var(--color-6);
    } 

    .VR {
        border: 5px outset var(--color-7);
    } 
    
    .RSE {
        border: 5px outset var(--color-8);
    }
    
    .Inauguration {
        border: 5px outset var(--color-9);
    }
    
    





/*-----------------Adaptation par thème Media Querry------------*/


  
    .ThemeD li div {                                   

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        
        color: var(--color-2);
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 2em;
    
        margin: 0 20% 1% 20%;
        padding : 0 2%;
        background-color: var(--color-3);
        border: 3px outset;
        border-radius: 15px;
        
    }
    
    
    .ThemeD li div img {
        max-height: 45px;
    }
    
   




    .imagesMain {
        width: 99.6%;
        border: 2px outset var(--color-3);
        border-radius: 20px;
    }


    #boxDino {                                              /*-------------- Special DINO -----------------*/
        margin: 0 20%;
    }
    
    .VideoDino {     
        width:99.6%;                                   /*-------------- Special DINO -----------------*/
        height: 650px;
        border: 2px outset var(--color-3);
    }
    


    
    .ThemeD .VR {
        border-color: var(--color-7);
    } 
    
    .VR3 {
        max-width: 6%;
    }
    
    .VR4 {
        max-width: 6%;
        transform: scaleX(-1);
    }
    
    



/*-----------------Contact------------*/



    .Mail {
        flex-direction: column;
        margin: 4% 0 5% 0;
        align-items: center;
    }

    .Address {
        order: 2;
        max-height: 61px;
        padding: 0;
    }

    span.email {
        order: 1;
        font-size: 2.5em;
        padding-bottom: 3%;
    }

    .TCoordonnes {
        padding: 0% 20%;
        font-size: 1.5em;
    }


}